<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品名称">
              <a-input  v-decorator="['goodsName', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="副标题">
              <a-input  v-decorator="['caption', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="三级类目名称">
              <a-input  v-decorator="['categoryName', {}]"/>
            </a-form-item>
          </a-col>
           <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="条目名称">
              <a-input  v-decorator="['entryName', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
           <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="卖点">
              <a-input  v-decorator="['sellPoint', {}]"/>
            </a-form-item>
          </a-col>
           <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="描述">
              <a-input  v-decorator="['description', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="价格">
              <a-input-number  style="width:100%" v-decorator="[ 'price', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="库存数量">
              <a-input-number  style="width:100%" v-decorator="[ 'quantity', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    
      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="商品SKU" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="itemMainTable.loading"
            :columns="itemMainTable.columns"
            :dataSource="itemMainTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"
           />
        </a-tab-pane>
      </a-tabs>

    </a-spin>
  </a-modal>
</template>

<script>

  import moment from 'moment'
  import pick from 'lodash.pick'
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  export default {
    name: 'GoodsMainModal',
    mixins: [JEditableTableMixin],
    data() {
      return {
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
       validatorRules: {
          
        },
        refKeys: ['itemMain', ],
        activeKey: 'itemMain',
        // 商品SKU
        itemMainTable: {
          loading: false,
          dataSource: [],
          columns: [
           
            {
              title: '所属类目名',
              key: 'category',
              type: FormTypes.input,
              defaultValue: '',
              // placeholder: '请输入${title}',
            },
            {
              title: '成本价',
              key: 'costPirce',
              type: FormTypes.inputNumber,
              defaultValue: '',
              // placeholder: '请输入${title}',
            },
            {
              title: '市场价',
              key: 'marketPrice',
              type: FormTypes.inputNumber,
              defaultValue: '',
            },
            {
              title: '库存数量',
              key: 'num',
              type: FormTypes.inputNumber,
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '商品价格',
              key: 'price',
              type: FormTypes.inputNumber,
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '商品卖点',
              key: 'sellPoint',
              type: FormTypes.input,
              defaultValue: '',
            },
            {
              title: '商家名称',
              key: 'sellerId',
              type: FormTypes.input,
              defaultValue: '',
            },
            {
              title: '店铺名称',
              key: 'shopId',
              type: FormTypes.input,
              defaultValue: '',
            },
            {
              title: '规格',
              key: 'spec',
              type: FormTypes.input,
              defaultValue: '',
            },
            {
              title: '库存量',
              key: 'stockCount',
              type: FormTypes.inputNumber,
              defaultValue: '',
            },
            {
              title: '商品标题',
              key: 'title',
              type: FormTypes.input,
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            }
          ]
        },
        url: {
          add: "/product-api/goodsMain/add",
          edit: "/product-api/goodsMain/web/edit",
          itemMain: {
            list: '/product-api/goodsMain/web/queryItemMainByMainId'
          },
        }
      }
    },
    methods: {
  
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'name', 'caption', 'shopId', 'sellerId', 'defaultItemId', 'brandId', 'categoryId',   'categoryName', 'entryId', 'entryName', 'isEnableSpec', 'templateTypeId', 'toExamine', 'isMarketable', 'sellPoint', 'description', 'cid', 'picUrls', 'sort', 'price', 'quantity', 'deleted', 'spuQuotaNum', 'visible', ))
          // 时间格式化
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.itemMain.list, params, this.itemMainTable)
        }
      },
 
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        //时间格式化
        return {
          ...main, // 展开
          itemMainList: allValues.tablesValue[0].values,
        }
      }
    }
  }
</script>

<style scoped>
</style>